<template>
  <div>
    <div class="list-btn">
      提交时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="show = true;type = '新增商户';formRole={}">新增商户</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.page = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
    <Modal
      v-model="show"
      :title="`${type}`"
      width="550"
      :footer-hide="true"
      :closable="type == '新增商户' ? false : true"
      :mask-closable="false"
     >
      <Form ref="formRole" :model="formRole" :rules="rules" :label-width="110" v-if="type == '新增商户' || type == '查看商户'">
        <FormItem label="商户名称" prop="name">
          <Input v-model.trim="formRole.name"  style="width: 200px" :disabled =" type == '新增商户'? false : true"/>
        </FormItem>
         <FormItem label="公司地址"  prop="address">
          <Input v-model.trim="formRole.address"  type="textarea" :autosize="{minRows: 2,maxRows: 3}" style="width: 200px" :disabled =" type == '新增商户'? false : true"/>
        </FormItem>
         <FormItem label="负责人" prop="contact">
          <Input v-model.trim="formRole.contact"  style="width: 200px" :disabled =" type == '新增商户'? false : true"/>
        </FormItem>
         <FormItem label="手机号" prop="phone">
          <Input v-model.trim="formRole.phone"  style="width: 200px" :maxlength="11" :disabled =" type == '新增商户'? false : true"/>
        </FormItem>
         <FormItem label="账号" prop="account">
          <Input v-model.trim="formRole.account"  style="width: 200px" :disabled =" type == '新增商户'? false : true"/>
        </FormItem>
         <FormItem label="密码" prop="pwd">
          <Input v-model.trim="formRole.pwd"  type="password" style="width: 200px" :disabled =" type == '新增商户'? false : true"/>
        </FormItem>
         <FormItem label="充值总额" v-if="type != '新增商户'">
          <Input v-model.trim="formRole.total_amount"  style="width: 200px" disabled/>
        </FormItem>
         <FormItem label="账户余额" v-if="type != '新增商户'">
          <Input v-model.trim="formRole.amount"  style="width: 200px" disabled/>
        </FormItem>
        <div style="text-align:right" v-if="type == '新增商户'">
          <Button @click="show = false;resetValidate('formRole');formRole = {}"  style="margin-right:2px">取消</Button>
          <Button type = "primary" @click="addMerchant">确定</Button>
        </div>
      </Form>
      <Form ref="formRole1" :model="formRole1"  :label-width="110" v-if="type == '单价配置(分)'">
        <FormItem label="短信验证码" >
          <Input v-model.trim="formRole1.name1"  style="width: 200px"/>
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(1,formRole1.name1)">提交</Button>
        </FormItem>
         <FormItem label="手机三要素">
          <Input v-model.trim="formRole1.name2"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(2,formRole1.name2)">提交</Button>
        </FormItem>
         <FormItem label="活体验证">
          <Input v-model.trim="formRole1.name3"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(3,formRole1.name3)">提交</Button>
        </FormItem>
         <FormItem label="银行卡鉴权" >
          <Input v-model.trim="formRole1.name4"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(4,formRole1.name4)">提交</Button>
        </FormItem>
         <FormItem label="运行商" >
          <Input v-model.trim="formRole1.name5"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(5,formRole1.name5)">提交</Button>
        </FormItem>
         <FormItem label="淘宝芝麻分" >
          <Input v-model.trim="formRole1.name6"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(6,formRole1.name6)">提交</Button>
        </FormItem>
        <FormItem label="风控" >
          <Input v-model.trim="formRole1.name7"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(7,formRole1.name7)">提交</Button>
        </FormItem>
        <!-- <FormItem label="魔杖分" >
          <Input v-model.trim="formRole1.name8"  style="width: 200px" />
          <Button type = "primary" size="small" style="margin-left:3px" @click="handleConfig(8,formRole1.name8)">提交</Button>
        </FormItem> -->
      </Form>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import {phoneType} from '../../../js/rules'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
    },
    data () {
      return {
        tag: {
          'title': '商户列表',
          'path': '/work/merchant/index'
        },
       show:false,
       formRole:{},
       formRole1:{},
       configList:[],
       type:'',//弹出框类型
       merchant_id:'',
       id:'',
       rules:{
          name: [
            { required: true, message: '请输入商户名称', trigger: 'blur'}
          ],
          address: [
            { required: true, message: '请输入公司地址', trigger: 'blur'}
          ],
          contact: [
            { required: true, message: '请输入负责人姓名', trigger: 'blur'}
          ],
          phone: [
            { required: true,  trigger: 'blur',validator: phoneType}
          ],
          account: [
            { required: true,   message: '请输入账号', trigger: 'blur'}
          ],
          pwd: [
            { required: true,   message: '请输入6位以上密码',trigger: 'blur',validator:function(rule, value, callback) {
              if (value.length <6) {
                callback(new Error('请输入6位以上密码'))
              } else {
                callback()
              }
            }
            }
          ],
       },
       listTitle: [
        {
          title: "提交时间",
          key: "add_time",
          align: "center",
          minWidth:150,
          render: (h, params) => {
            return h("div", params.row.add_time)
          }
        },
        // {
        //   title: "商户ID",
        //   key: "merchant_id",
        //   align: "center",
        //   minWidth:80,
        // },
        {
          title: "商户名称",
          key: "name",
          align: "center",
          minWidth:85,
        },
        {
          title: "负责人",
          key: "contact",
          align: "center",
          minWidth:90,
          // render: (h, params) => {
          //   return h('div', params.row.phone ?  params.row.phone : '—')
          // }
        },
        {
          title: "负责人手机号",
          key: " phone",
          align: "center",
          minWidth:120,
          render: (h, params) => {
            return h('div', params.row.phone ?  params.row.phone : '—')
          }
        },
        {
          title: "总充值金额",
          key: "total_amount",
          minWidth:90,
          align: "center",
          render: (h, params) => {
            return h('div', this.toYuan(params.row.total_amount))
          }
        },
        {
          title: "余额",
          key: "amount",
          minWidth:80,
          align: "center",
          render: (h, params) => {
            return h('div', this.toYuan(params.row.amount))
          }
        },
        // {
        //   title: "已用金额",
        //   key: "pay_amount",
        //   minWidth:80,
        //   render: (h, params) => {
        //     return h('div', this.toYuan(params.row.pay_amount))
        //   }
        // },
        {
          title: "状态",
          key: "deleted",
          minWidth:80,
          align: "center",
          render: (h, params) => {
            let text = '';
            let color = '';
            switch (params.row.deleted){
              case '0':
                text = "启用"
                color = "#19be6b"
                break;
              case '1':
                text = "禁用"
                color = "#ed4014"
                break;
            }
            return h('div', {
              style:{
                color: color,
                fontWeight:'600'
              }
            },text)
          }
        },
         {
          title: "操作",
          key: "action",
          minWidth:200,
          align:'center',
          render: (h, params) => {
            let btnType = "启用";
            let type = 'success'
            if(params.row.deleted == 0){
              btnType = '禁用';
              type = 'error'
            }else if(params.row.deleted == 1){
              btnType ='启用';
              type = 'success'
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "6px"
                  },
                  on: {
                    click: () => {
                     this.type = '查看商户';
                     this.show = true;
                     this.formRole = JSON.parse(JSON.stringify(params.row));
                     this.formRole.pwd = '**********'
                    }
                  }
                },
                "查看"
              ),
               h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  style: {
                    marginRight: "6px",
                  },
                  on: {
                    click: () => {
                      this.type = '单价配置(分)';
                      this.formRole1 = {};
                      this.merchant_id =params.row.merchant_id;
                      this.$get('/admin/moneyList',{merchant_id:this.merchant_id})
                        .then(res => {
                          console.log(res,'单价');
                          if(res.code == 0){
                            this.show = true;
                           this.configList = res.data;
                           if(this.configList.length >0){
                              this.configList.map((item,index) => {
                                 console.log(item.type,'tt');
                                switch(item.type){
                                  case '1':
                                    this.formRole1.name1 = item.money;

                                    break;
                                  case '2':
                                    this.formRole1.name2 = item.money;
                                    break;
                                  case '3':
                                    this.formRole1.name3 = item.money;
                                    break;
                                  case '4':
                                    this.formRole1.name4 = item.money;
                                    break;
                                  case '5':
                                    this.formRole1.name5 = item.money;
                                    break;
                                  case '6':
                                    this.formRole1.name6 = item.money;
                                    break;
                                  case '7':
                                    this.formRole1.name7 = item.money;
                                    break;
                                }
                                // console.log( this.formRole1,'name1');
                              })
                           }
                          }
                        })
                    }
                  }
                },
                '配置'
              ),
                h(
                "Button",
                {
                  props: {
                    type: type,
                    size: "small",
                  },
                  style: {
                    marginRight: "6px",

                  },
                  on: {
                    click: () => {
                        this.$Modal.confirm({
                        title: '提示',
                        content: `<p>确定要${btnType}吗?</p>`,
                        onOk: () => {
                           let data = {
                            id:params.row.merchant_id,
                         };
                           this.$post('/Merchant/del', data)
                            .then((res) => {
                              if(res.code === 0){
                                // console.log(res,'删除')
                                this.$Message.success(`${btnType}成功！`);
                                this.getList(this.url);
                              }
                            }, (err) => {
                              console.log(err);
                            })
                        },
                        onCancel: () => {
                        }
                      });

                    }
                  }
                },
                btnType
              ),

            ]);
          }
        }
      ],
      list:[],
      url:'/merchant/merchantList',
      params: {
        page: 1,
        pageSize: 10
      },
      }
    },
    mounted() {

    },
    methods: {

    addMerchant(){
        this.$refs.formRole.validate((valid) => {
          if(valid){
            let data = this.formRole;
            this.$post('/merchant/merchantAdd',data).then(res => {
              if(res.code == 0){
                // this.$Message.success(res.msg);
                this.show = false;
                this.resetValidate('formRole');
                this.$Message.success("新增完成");
                this.getList(this.url)
              }else{
                this.$Message.error(res.msg);
                this.show = false;
                this.resetValidate('formRole');
              }
            })
          }
        })
      },
      handleConfig(type,money){
        let id = '';
        if(this.configList.length >0 ){
           this.configList.map((item,index) => {
            if(item.type == type){
              id = item.id
            }
          })
        }

        if(money){
          let data = {
            type:type,
            merchant_id:this.merchant_id,
            money:money,
            id:id
          }
          this.$post('/admin/money',data).then(res => {
            if(res.code == 0){
              // this.$Message.success(res.msg);
              this.show = false;
              this.resetValidate('formRole1');
              this.$Message.success("配置完成");
              // this.getList(this.url)
            }else{
              this.$Message.error(res.msg);
              this.show = false;
              this.resetValidate('formRole1');
            }
         })
        }else{
          this.$Message.warning('金额不能为空')
        }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
</style>
